<template>
	<view class="page-home">
			<scrollHeaderFixed
				:scrollTop="scrollTop"
				@clickLeft="goBack"
			>
			<view slot="navBar">
				<basic-nav-bar 
					backgroundColor="transparent"
					left-icon="arrowleft" 
					title="锦江旅行" 
				    :showLeftBack="showLeftBack"
					:statusBar="true"
					:border="false" 
					:fixed="true">
				</basic-nav-bar>				
			</view>
				<view slot="search">
					<!-- 搜索入口 -->
					<search-entrns 
						placeholder="搜索景点/线路"
						showCity
						:name="params.name"
						:keyword="params.keyword"
						@click:city="$listSearch_toSelectCity" 
						@click:search="$listSearch_toSearch(Object.assign({productType: 0}, params))"
					/>						
				</view>
				<!-- 门票线路选择 -->					
				<tabsBar @change="changeTab" :tab="currentTab" v-show="scrollTop > tabsFixedScrollTop" />		
			</scrollHeaderFixed>
        <view class="page-home--content">
			<basic-skeleton
				:loading="loading"
				:list="skeleton"
			>
				<!-- 热搜 -->
				<hot :params="params" />	

				<!-- 门票线路入口 -->
				<entrance @click:category="toCategory"/>

				<!-- banner -->
				<banner :pictures="banner"></banner>

				<!-- 门票线路选择 -->
				<view class="page-home-list-tabs">
					<tabsBar @change="changeTab" :tab="currentTab" />			
				</view>
				<!-- 门票线路推荐列表 -->
				<list :currentTab="currentTab" :params="params"/>
			</basic-skeleton>

			
			<!-- 小程序首页/订单入口 -->
			<mpEntry page="home"/>			
				

			<!-- 定位变更提示 -->
			<uni-popup ref="dialog" type="dialog">
					<uni-popup-dialog 
					:content="`您当前定位的城市是${tempParams && tempParams.city}，是否切换？`" 
					@close="$refs.dialog.close()" 
					@confirm="changeCity" />
			</uni-popup>

			<!-- 安全区 -->
			<basic-safe-area />
		</view>		
	</view>
</template>

<script>
	import Vue from 'vue'
	import sdk from 'sdk'
	import { bannerList } from 'api'
	import searchEntrns from '@/components/business/search-entrns'	
	import scrollHeaderFixed from '@/components/business/scroll-header-fixed'
	import mpEntry from '@/components/business//mp-entry'
	import hot from './components/hot'
	import banner from './components/banner'
	import entrance from './components/entrance'
	import list from './components/list'
	import tabsBar from './components/tabs-bar'
	import {encodeQuery} from 'utils/helper/query'
	import storage from 'utils/helper/storage'
	import listSearch from '@/mixins/list-search'
	import city from '@/mixins/city'
	import skeleton from './skeleton'
	import {DEFAULT_CITY} from '@/model/enum'
import setTabBar from '@/mixins/setTabBar'
	

	export default {
		name: 'home',
		mixins: [listSearch, city, setTabBar],
		components: {
			searchEntrns,
			hot,
			entrance,
			banner,
			list,
			tabsBar,
			scrollHeaderFixed,
			mpEntry
		},
		
		data() {
			return {
				// 城市规则
				params: { // 列表筛选条件
					...DEFAULT_CITY,
					keyword: '',
					isCurrentCity: false,
					lat: null,
					lon: null
				},
			    showLeftBack: true,

				tempParams: null, // 临时城市定位信息

				banner: [],
				currentTab: '景点门票',
				scrollTop:0,
				tabsFixedScrollTop: 244,

				loading: true,
				skeletonStyle: '',
				skeleton: skeleton, // 骨架图配置
			}
		},
		watch:{
			params:{
				handler: function(val) {
						console.log('watch-params::', val)
				},
				deep: true
			}
		},
		onShow(){
			this.setTabBarIndex(0)
			this.checkCity()
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 300)
		},

		created() {		
			this.initCity()
			this.getBanner()
			// #ifdef MP		
			this.showLeftBack = false		
			// #endif
		},

		onReady() {
			this.getLocation()
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			initCity() {
				let cacheCity = this.$city_getCacheCity()
				// console.log('首页获取缓存城市数据：', cacheCity)
				if (cacheCity) {
					const { regionId, name, lat, lon } = cacheCity
					this.params = { ...this.params, regionId, name, lat, lon, isCurrentCity: true }
				}
				// 初始化当前选择城市
				sdk.selectCity({
					regionId: this.params.regionId,
					name: this.params.city
				})
			},
			getLocation() {
				this.$city_getLocation().then(res => {
					this.beforeChangeCity(res)
				}).catch(err => {
					console.warn('[pages/index::getLocation] fail', err)
				})
			},
			// 定位城市和当前城市不一致，则提示是否切换
			beforeChangeCity(res) {
				// name为空表明未获取到城市名称
				if (res.city && res.regionId && Number(res.regionId) !== Number(this.params.regionId)) {
					this.tempParams = res
					this.$refs.dialog.open()
				}
			},
			changeCity() {
				this.params.regionId = this.tempParams.regionId
				this.params.name = this.tempParams.city
				const {  latitude, longitude } = this.tempParams

				// 缓存当前定位城市
				storage.set('__region_city__', {
					regionId: this.tempParams.regionId,
					name: this.tempParams.city,
					lat: latitude,
					lon: longitude
				})
				// console.log('首页确认切换城市后缓存城市的数据：', this.$city_getCacheCity())

				// 当前定位城市存为当前选择城市
				sdk.selectCity({
					regionId: this.params.regionId,
					name: this.params.city
				})

				this.$refs.dialog.close()
			},
			checkCity() { // 统一城市选择
				sdk.getSelectCity().then(city => {
					city.name && (this.params.name = city.name)
					city.regionId && (this.params.regionId = city.regionId)
				})
			},
			getBanner() {
				bannerList().then(res => {
					this.banner = res.result
				})
			},
			goBack() {
				sdk.navigateBack()
			},
			changeTab(tab) {
				uni.pageScrollTo({ // 切换tab调整滚动位置显示完整信息
					scrollTop: this.scrollTop > this.tabsFixedScrollTop ? this.tabsFixedScrollTop + 10 : this.scrollTop,
					duration: 100
				});
				this.currentTab = tab
			},
			toCategory(item) {
				let queryStr = encodeQuery({
					regionId: this.params.regionId,
					name: this.params.name
				})

				sdk.navigateTo({
					url: `${item.path}?${queryStr}`
				})
			}
		}
	}

</script>

<style lang="less">
.pagePadding(){
	padding: 10rpx @page_horizonal_margin 0;
}
.page-home{
	.page-home--content{
		.pagePadding
	}
	.page-home-list-tabs{
		margin-top: 50rpx
	}
}
</style>
